<template>
  <!--  貌似手机端-->
  <van-popup v-if="isPhone" v-model="reward_show"  round class="popup" :close-on-click-overlay="false">
    <div class="_wz_peoplePopup_app">
      <h4 class="r-tit">登录</h4>
      <div style="padding: 0.3rem 0.5rem;">
        <div class="_wz_login_div">
          <div class="_wz_login_div_div"><img src="../assets1/xm.png"/></div>
          <div class="_wz_login_div_input">
            <span class="r-name">姓名</span>
            <input class="r-input" v-model="formData.name" maxlength="8" placeholder="请输入您的姓名" />
            <div style="clear: both;"></div>
          </div>
        </div>
        <div class="_wz_login_div">
          <div class="_wz_login_div_div"><img src="../assets1/dh.png"/></div>
          <div class="_wz_login_div_input">
            <span class="r-name">联系电话</span>
            <input class="r-input" type="number" oninput="if(value.length>11)value = value.slice(0,11)" v-model="formData.phone" placeholder="请输入您的手机号"/>
            <div style="clear: both;"></div>
          </div>
        </div>
        <div class="_wz_login_div">
          <div class="_wz_login_div_div"><img src="../assets1/dw.png"/></div>
          <div class="_wz_login_div_input">
            <span class="r-name">所在单位</span>
            <input class="r-input" v-model="formData.unit" maxlength="20" placeholder="请输入所在单位" />
            <div style="clear: both;"></div>
          </div>
        </div>
      </div>
      <div class="r-btn" @click="onSave">提交</div>
      <h5 class="r-tip1">注：请正确填写你的相关信息</h5>
    </div>
  </van-popup>
  <!--  貌似PC端-->
  <van-popup v-else v-model="reward_show" round class="popup1" :close-on-click-overlay="false">
    <div class="_wz_peoplePopup_pc">
      <h4 class="r-tit">登录</h4>
      <div style="padding: 30px 40px;">
        <div class="_wz_login_div">
          <div class="_wz_login_div_div"><img src="../assets1/xm.png"/></div>
          <div class="_wz_login_div_input">
            <span class="r-name">姓名</span>
            <input class="r-input" v-model="formData.name" maxlength="8" placeholder="请输入您的姓名" />
            <div style="clear: both;"></div>
          </div>
        </div>
        <div class="_wz_login_div">
          <div class="_wz_login_div_div"><img src="../assets1/dh.png"/></div>
          <div class="_wz_login_div_input">
            <span class="r-name">联系电话</span>
            <input class="r-input" type="number" oninput="if(value.length>11)value=value.slice(0,11)" v-model="formData.phone" placeholder="请输入您的手机号"/>
            <div style="clear: both;"></div>
          </div>
        </div>
        <div class="_wz_login_div">
          <div class="_wz_login_div_div"><img src="../assets1/dw.png"/></div>
          <div class="_wz_login_div_input">
            <span class="r-name">所在单位</span>
            <input class="r-input" v-model="formData.unit" maxlength="20" placeholder="请输入所在单位" />
            <div style="clear: both;"></div>
          </div>
        </div>
      </div>
      <div class="r-btn" @click="onSave">提交</div>
      <h5 class="r-tip1">注：请正确填写你的相关信息</h5>
    </div>
  </van-popup>
</template>
<script>
export default {
  props: ['type'],
  data() {
    return {
      captchaState: true, //验证码状态
      reward_show: false,
      isPhone: false,
      formData:{
        name:'',
        phone:'',
        unit:'',
      },
    };
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

  },
  methods: {//执行的方法
    enter(flag) {
      let that = this;
      that.pushPage(`${flag}`);
    },
    //根据不同的类型打开弹框 type=1我的奖品
    open(value) {
      let that = this;
      that.isPhone = value;
      that.reward_show = true;
    },
    onSave() {
      let that = this;
      // /^ [\u4e00 - \u9fa5] | [a-zA-Z]$/
      if (that.formData.name == "") {
        that.$toast("姓名不能为空");
        return;
      }
      var name = /^[A-Za-z\u4e00-\u9fa5]+$/;
      if (!name.test(that.formData.name)) {
        that.$toast("请正确输入姓名（中英文填写）");
        return;
      }


      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(that.formData.phone)) {
        that.$toast("请输入正确的手机号");
        return;
      }
      if (that.formData.unit == "") {
        that.$toast("所在单位不能为空");
        return;
      }

      var unit = /^[A-Za-z\u4e00-\u9fa5]+$/;
      if (!unit.test(that.formData.unit)) {
        that.$toast("请正确输入所在单位（中英文填写）");
        return;
      }

      that.$toast.loading({message: "登录中...", forbidClick: true});
      that.http.login(that.formData).then(res => {
        that.$toast(res.message);
        if (res.status == 1000) {
          that.reward_show = false;
          localStorage.setItem("userId", res.data.userId);
          localStorage.setItem("userData", JSON.stringify(res.data));
          that.$emit('checkUser')
          that.formData = {};
        }
      }).catch(err => {
        that.$toast.clear();
      });
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态
  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style scoped lang="scss">
.popup1 {
  width: 500px;
  height: 550px;
  overflow: hidden;
  background:none;
  ._wz_peoplePopup_pc{
    background: url("../assets1/loginBa.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 0.4rem;
    height: 100%;
    ._wz_login_div{
      margin: 0.3rem 0 0.2rem 0;
      ._wz_login_div_div{
        display: inline-block;
        vertical-align: bottom;
        height: 45px;
        width: 45px;
        text-align: center;
        line-height: 45px;
        background: #fff;
        border-radius: 50%;
        img{
          width: 40%;
          vertical-align: middle;
        }
      }
      ._wz_login_div_input{
        margin: 0 0 0 10px;
        width: calc(100% - 45px - 10px);
        display: inline-block;
        vertical-align: bottom;
        background: #fff;
        border-radius: 30px;
        overflow: hidden;
        padding: 0 10px;
        input{
          border: 0!important;
          width: calc(100% - 90px)!important;
        }
      }
    }
  }
  .r-tit {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-top: 20px;
  }
  .r-mp {
    width: 300px;
    height: 50px;
    margin-top: 20px;
  }
  .r-tip1 {
    color: $font-666;
    font-size: 14px;
    margin-top: 20px;
  }
  .r-name {
    width: 90px;
    line-height: 45px;
    height: 45px;
    display: inline-block;
    vertical-align: bottom;
    text-align: justify;
    text-align-last: justify;
    padding: 0 10px;
  }
  .r-input {
    border: 1px solid #ddd;
    height: 45px;
  }
  .r-btn {
    width: 200px;
    height: 50px !important;
    line-height: 50px;
    color: #fff;
    background: #ff5154;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
    margin: auto;
    cursor: pointer;
  }


  ._wz_newt_button_app{
    margin-top: 15px;
    width: 100px;
    line-height: 45px;
    height: 45px;
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
  }
}
.popup {
  width: 90% !important;
  height: 7.6rem !important;
  background-size: 100% 100%;
  font-size: 0.26rem;
  background:none;
  ._wz_peoplePopup_app{
    background: url("../assets1/loginBa.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 0.6rem;
    height: 100%;
    ._wz_login_div{
      margin: 0.3rem 0 0.2rem 0;
      ._wz_login_div_div{
        display: inline-block;
        vertical-align: bottom;
        height: 0.7rem;
        width: 0.7rem;
        text-align: center;
        line-height: 0.7rem;
        background: #fff;
        border-radius: 50%;
        img{
          width: 40%;
          vertical-align: middle;
        }
      }
      ._wz_login_div_input{
        margin: 0 0 0 0.3rem;
        width: calc(100% - 0.7rem - 0.3rem);
        display: inline-block;
        vertical-align: bottom;
        background: #fff;
        border-radius: 0.6rem;
        overflow: hidden;
        span{
          display: block;
          float: left;
        }
        span:after {
          content: " ";
          display: inline-block;
          width: 100%;
        }
        input{
          display: block;
          float: left;
          border: 0!important;
        }
      }
    }
  }
  .r-tit {
    font-size: 0.4rem;
    font-weight: bold;
    color: #000;
  }
  .r-mp {
    width: 4rem;
    height: 2rem;
    margin-top: 0.25rem;
  }
  .r-tip1 {
    color: $font-666;
    font-size: 0.2281rem;
    margin-top: 0.2rem;
  }
  .r-tip {
    color: $font-666;
    font-size: 0.2281rem;
    margin-top: 0.1rem;
  }
  .r-name {
    width: 1.8rem;
    line-height: 0.7rem;
    height: 0.7rem;
    display: inline-block;
    vertical-align: bottom;
    text-align: justify;
    text-align-last: justify;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .r-input {
    border: 1px solid #ddd;
    height: 0.7rem;
    width: calc(100% - 1.8rem);
    //padding-left: 0.47rem;
    //border-radius: 0.6rem;
    //margin-top: 0.3rem;
    box-sizing: border-box;
  }
  input::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #ddd;
  }

  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #ddd;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #ddd;
  }

  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #ddd;
  }

  input::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #ddd;
  }
  input {
    -webkit-appearance: none;
  }
  .r-btn {
    width: 3rem;
    height: 0.8rem !important;
    line-height: 0.8rem;
    color: #fff;
    background: #ff5154;
    border-radius: 0.6rem;
    font-size: 0.33rem;
    font-weight: bold;
    margin: auto;
    cursor: pointer;
  }


  ._wz_newt_button_app{
    width: 1.8rem;
    line-height: 0.7rem;
    height: 0.7rem;
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
  }
}
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
::v-deep input[type="number"] {
  -moz-appearance: textfield;
}
</style>
